<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS相对定位</title>
</head>
<style>
    /*给元素设置position:relative即可实现相对定位,相对定位是相对与发生位置变化的位置,定位可以超出父元素位置
      设置之后,常用属性有:left,right,top,bottom四个属性调整位置
    */
    .outer {
        width: 300px;
        height: 300px;
        background-color: pink;
    }

    .inner {
        width: 100px;
        height: 100px;
        background-color: red;
        font-size: 20px;
        text-align: center;
        line-height: 80px;

        /*    设置相对定位*/
        position: relative;
        left: 30px;
        top: 10px;
        /*
        相对定位的特点:
        1.不会脱离文档流,元素位置的改变只是效果上的变化,不会对其他元素产生影响
        2.定位元素的层级比普通元素的层级高,无论什么定位,显示层级都是一样的
        3.left不能和right一起设置,top也不能和bottom一起设置
        4.相对定位的元素也能继续浮动,但是不推荐
        5.相对定位给的元素也能通过margin调整位置,但是不推荐
        */
    }

    .inner2 {
        width: 50px;
        background-color: green;
    }
</style>
<body>
<div class="outer">
    <div class="inner2">查看影响</div>
    <div class="inner">相对定位</div>

</div>
</body>
</html>